import React, { Component } from 'react'
import moment from 'moment'
import { Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';
import TweenOne from 'rc-tween-one';
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
import Warning from './warning'
require('./index.css')

TweenOne.plugins.push(Children);

export default class BarREcharts extends Component {

    constructor(props) {
        super(props)
        this.state = {
            hotelDistributeIncome: [],
            hotelDistributeNum: [],
            hotelFiveData: [],

            ticketDistributeIncome: [],
            ticketDistributeNum: [],
            ticketFiveData: [],

            consumptionDistributeIncome: [],
            consumptionDistributeNum: [],
            consumptionNowData: [],

            warningList: [],
            loading: true,
            isData: false
        }
    }

    componentWillMount() {
        let type = this.props.match.params.type
        let productType = this.props.match.params.productType
        if (type === 'fiveDays') {
            document.title = '近五天酒店/门票收入/销量统计排行榜'
        } else {
            document.title = productType === 'ticket' ? '门票收入/销量统计排行榜' : '酒店收入/销量统计排行榜'
        }
        this.setState({
            warningList: JSON.parse(localStorage.getItem('warningList')),
            hotelDistributeIncome: JSON.parse(localStorage.getItem('hotelDistributeIncome')),
            hotelDistributeNum: JSON.parse(localStorage.getItem('hotelDistributeNum')),
            hotelFiveData: JSON.parse(localStorage.getItem('hotelFiveData')),

            ticketDistributeIncome: JSON.parse(localStorage.getItem('ticketDistributeIncome')),
            ticketDistributeNum: JSON.parse(localStorage.getItem('ticketDistributeNum')),
            ticketFiveData: JSON.parse(localStorage.getItem('ticketFiveData')),

            consumptionDistributeIncome: JSON.parse(localStorage.getItem('consumptionDistributeIncome')),
            consumptionDistributeNum: JSON.parse(localStorage.getItem('consumptionDistributeNum')),
            consumptionNowData: JSON.parse(localStorage.getItem('consumptionNowData')),
        }, () => {
            this.setState({ loading: false, isData: true })
        })
    }

    componentDidMount() {

    }

    getHotelOption() {
        let productType = this.props.match.params.productType
        var titlename = [];
        var data = []//销量
        var valdata = []//收入
        let t = 0 //销量总数
        let p = 0 //收入总数
        let data1 = []
        let data2 = []
        for (let i = 0; i < this.state[`${productType}DistributeNum`].length; i++) {
            titlename.push(this.state[`${productType}DistributeNum`][i]['name'])
        }
        for (let j = 0; j < titlename.length; j++) {
            for (let n = 0; n < this.state[`${productType}DistributeNum`].length; n++) {
                if (titlename[j] === this.state[`${productType}DistributeNum`][n]['name']) {
                    data.push(this.state[`${productType}DistributeNum`][n]['value'])
                    t += parseInt(this.state[`${productType}DistributeNum`][n]['value'])
                }
            }
            for (let m = 0; m < this.state[`${productType}DistributeIncome`].length; m++) {
                if (titlename[j] === this.state[`${productType}DistributeIncome`][m]['name']) {
                    valdata.push(this.state[`${productType}DistributeIncome`][m]['value'])
                    p += parseInt(this.state[`${productType}DistributeIncome`][m]['value'])
                }
            }
        }
        for (let k = 0; k < data.length; k++) {
            data1.push(Math.round(parseInt(data[k]) / t * 10000) / 100)
        }
        for (let q = 0; q < valdata.length; q++) {
            data2.push(Math.round(parseInt(valdata[q]) / p * 10000) / 100)
        }
        return {
            backgroundColor: '#fff',
            grid: {
                left: '24%',
                right: '18%',
                bottom: '2%',
                top: '10%',
                containLabel: false,
            },
            legend: {//图例组件，颜色和名字
                right: 10,
                top: 0,
                itemGap: 16,
                itemWidth: 18,
                itemHeight: 10,
                textStyle: {
                    color: '#000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            yAxis: [
                {
                    type: 'category',
                    data: titlename,
                    axisLabel: {
                        interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                        textStyle: {
                            color: '#707070',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 13,
                            fontWeight: 'bolder',
                        }
                    },
                    axisTick: {//坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                    },
                }
            ],
            xAxis: [
                {
                    type: 'value',
                    splitNumber: 5,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }

                }
            ],
            series: [
                {
                    name: '收入',
                    type: 'bar',
                    data: data2,
                    barWidth: 12,
                    barGap: 0,//柱间距离
                    label: {//图形上的文本标签
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: function (params) {
                                return ` ${valdata[params.dataIndex]}元 `
                            },
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },

                        },
                    },
                    itemStyle: {//图形样式
                        normal: {
                            barBorderRadius: 6,
                            color: {
                                colorStops: [{
                                    offset: 0,
                                    color: '#31c497' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#53deff' // 100% 处的颜色
                                }],
                            }
                        },
                    },
                },
                {
                    name: '销量',
                    type: 'bar',
                    data: data1,
                    barWidth: 12,
                    barGap: 0.2,//柱间距离
                    label: {//图形上的文本标签
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: function (params) {
                                return ` ${data[params.dataIndex]}张 `
                            },
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },

                        },
                    },
                    itemStyle: {//图形样式
                        normal: {
                            barBorderRadius: 6,
                            color: {
                                colorStops: [{
                                    offset: 0,
                                    color: '#F5BF43' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#E56750' // 100% 处的颜色
                                }],
                            },
                        },
                    },
                },

            ]
        }
    }

    html() {
        let productType = this.props.match.params.productType
        let { ticketDistributeIncome, ticketDistributeNum, hotelDistributeIncome, hotelDistributeNum, consumptionDistributeIncome, consumptionDistributeNum, warningList } = this.state
        let htmlData = []
        let num = this.state[`${productType}DistributeIncome`].length
        htmlData.push(
            <div className="ReportBox  ReportItem clearfix boxS pad15 bgfff" style={warningList.length > 0 ? { margin: '64px auto 0' } : null}>
                {this.state[`${productType}DistributeIncome`].length > 0 ?
                    <div className="clearfix">
                        <ReactEcharts
                            ref=""
                            style={{ height: (50 * num + 60), width: '100%' }}
                            option={this.getHotelOption()}
                            notMerge={true}
                            lazyUpdate={true}
                            theme={"theme_name"}
                        />
                    </div>

                    : <div className="mr-texc colb3">暂无统计数据</div>}
            </div>
        )
        return htmlData
    }

    max(arr) {
        var num = parseInt(arr[0])
        for (var i = 0; i < arr.length; i++) {
            if (num < parseInt(arr[i])) {
                num = parseInt(arr[i])
            }
        }
        return num + 50;
    }

    getAxisOption(productType) {
        let fiveData = this.state[`${productType}FiveData`]
        if (productType == 'consumption') {
            fiveData = this.state[`${productType}NowData`]
        }
        let fiveDayNum = fiveData.fiveDayNum
        let fiveDayIncome = fiveData.fiveDayIncome
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            height: 80,
            width: '75%',
            padding: [2],
            textStyle: {
                fontSize: 9,
                height: 5
            },
            legend: {
                data: ['收入', productType === 'ticket' ? '张数' : '房间数'],
                left: 10,
                top: 10,
                padding: 10,
                itemHeight: 14,
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function () {
                        let fiveDayString = fiveData.fiveDayString
                        var res = [];
                        var len = 0;
                        while (len < fiveDayString.length) {
                            res.push(moment(fiveDayString[len]).format('MM-DD'));
                            len++;
                        }
                        return res;
                    })(),
                    nameTextStyle: {
                        fontSize: 8
                    }
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: productType === 'ticket' ? '张' : '间',
                    max: this.max(fiveDayNum),
                    min: 0,
                    splitNumber: 4,
                    nameGap: 4,
                    boundaryGap: [0.2, 0.2],
                    nameTextStyle: {
                        fontSize: 10
                    }
                },
                {
                    type: 'value',
                    scale: true,
                    name: '元',
                    nameGap: 4,
                    max: this.max(fiveDayIncome),
                    splitNumber: 4,
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    nameTextStyle: {
                        fontSize: 10
                    }
                }
            ],
            series: [
                {
                    name: '收入',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    barWidth: '45%',
                    itemStyle: {
                        color: '#30C396'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 12
                    },
                    data: fiveData.fiveDayIncome
                },
                {
                    name: productType === 'ticket' ? '张数' : '房间数',
                    type: 'line',
                    itemStyle: {
                        color: '#F5C565'
                    },
                    data: fiveData.fiveDayNum
                }
            ]
        }
    }

    render() {
        let { isData, warningList } = this.state
        let type = this.props.match.params.type
        return (
            <div style={{ marginBottom: 20 }} id="bg">
                {isData && <Warning />}
                <Spin spinning={this.state.loading} style={{ width: '100%', position: 'fixed', top: '48%' }} />
                {isData && type != 'fiveDays' && this.html()}
                {isData && type == 'fiveDays' && <div className="ReportBox ReportItem clearfix boxS pad15 bgfff" style={warningList.length > 0 ? { margin: '64px auto 0', padding: '8px 0 0 0' } : { padding: '8px 0 0 0' }} >
                    <p className="te-cen fw-6">门票近五天收入及入园张数</p>
                    <ReactEcharts
                        ref=""
                        style={{ height: 180 }}
                        option={this.getAxisOption('ticket')}
                        notMerge={true}
                        lazyUpdate={true}
                        theme={"theme_name"}
                    />
                </div>}
                {isData && type == 'fiveDays' && <div className="ReportBox ReportItem clearfix boxS pad15 bgfff" style={{ padding: '8px 0 0 0' }}>
                    <p className="te-cen fw-6">酒店近五天收入及入住房间数</p>
                    <ReactEcharts
                        ref=""
                        style={{ height: 180 }}
                        option={this.getAxisOption('hotel')}
                        notMerge={true}
                        lazyUpdate={true}
                        theme={"theme_name"}
                    />
                </div>}
                {/* {isData&&type=='fiveDays'&&<div className="ReportBox ReportItem clearfix boxS pad15 bgfff" style={{padding:'8px 0 0 0'}}>
            <p className="te-cen fw-6">二销近五天收入及入住房间数</p>
            <ReactEcharts
                ref = ""
                style={{height:180}}
                option={this.getAxisOption('consumption')}
                notMerge={true}
                lazyUpdate={true}
                theme={"theme_name"}
            />
        </div>} */}
            </div>
        )
    }
}
